<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>速算小游戏</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes">

	<link rel="stylesheet" href="${pageContext.request.contextPath }/css/style.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/css/weui.min.css">
<style type="text/css">
body{
background:url(./images/test.jpg);
}
.content{
   text-align:center;
   font-size:38px;
}
.page_title {
    text-align: center;
    font-size: 34px;
    color: #3cc51f;
    font-weight: 400;
    margin: 10px 15%;
}
.hd {
    padding: 2em 0;
}
.page_desc {
    text-align: center;
    color: #888;
    font-size: 14px;
}

.blue {
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background: -moz-linear-gradient(top, #00adee, #0078a5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.bigrounded {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 85%'Microsoft yahei',Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}
.bottom{
width:100%;
margin-top:20%;
}
.l-bottom{
margin-left:12%;
padding:5px;
float:left;
}
.r-bottom{
margin-right:12%;
padding:5px;
float:right;
}
.tip{
height:40px;
text-align:center;
font-size: 24px;
}
</style>
  </head>
  
  <body>
  <div style="display:none">
      <img  src="${pageContext.request.contextPath }/images/count2.jpg">
  </div>
   <div class="hd">
		<h1 class="page_title">速算小游戏</h1>
		<p class="page_desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		 &nbsp;&nbsp;&nbsp;&nbsp; ——出自新之火工作室</p>
	</div>
	<div style="margin-right:15px;font-size: 24px;">
        <div class="weui-cell__ft">
                    简单<input class="weui-switch" type="checkbox" id="simplelevel"/>
        </div>
	<div class="weui-cell__ft">
                    困难<input class="weui-switch" type="checkbox" id="highlevel"/>
     </div>
     </div>
    <div class="progress">
      <span id="timeProgress" class="green" style="width: 100%;"><span id="percenr"></span></span>
    </div>
    <div id="tip" class="tip"></div>
    <div class="content">
      <span >
    <label id="firNum" style="width:42px;display:inline-block;">2</label>&nbsp;<label id="operate" style="width:30px;display:inline-block;">+</label>
   <label id="sedNum" style="width:62px;display:inline-block;">3</label>=
    <input   id="userResult"  type="tel"  min="1"   style="width:70px;height:45px;font-size:38px;background-color:transparent" oninput="countResult()" onkeydown="press(event)" onfocus="isShowLogin()"/>
    </span>
    </div>
	<div class="bottom">
		<div class="l-bottom">
			<a class="button blue bigrounded" onclick="document.getElementById('hdsm').style.display='block';document.getElementById('hdsmContent').style.display='block';">游戏说明</a>
		</div>
		<div class="r-bottom">
			<a href="${pageContext.request.contextPath }/user/toGameList" class="button blue bigrounded">游戏排名</a>
		</div>
	</div>
	<div style="text-align:center;position:fixed;bottom:0;width:100%;color:rgba(0,0,0,.2);line-height: 1.6;">新之火工作室@新林</div>
	<div id="dialog1" style="display: none;">
		<div class="weui-mask"></div>
		<div class="weui-dialog">
			<div class="weui-dialog__hd">
				<strong class="weui-dialog__title">游戏结束</strong>
			</div>
			<div class="weui-dialog__bd" id="endContent">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
			<div class="weui-dialog__ft">
				<a href="javascript:;"
					class="weui-dialog__btn weui-dialog__btn_default" onClick="rePlay()">再玩一局</a> <a
					href="javascript:;"  id="share"
					class="weui-dialog__btn weui-dialog__btn_primary" onClick="share()">分享</a>
			</div>
		</div>
	</div>
	<!--BEGIN dialog2-->
    <div id="dialog2" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd">
                  游戏昵称：<input id="username" type="text" style="height:30px;" value="${username}"/><br><br>
                  性别：<input id="sex" type="radio" name="sex" value="man" checked>男&nbsp;<input type="radio" name="sex" value="woman">女
            </div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary"  onclick="login()">确定</a>
            </div>
        </div>
    </div>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/game.js?vertion=1123113"></script>
	<jsp:include page="rule.jsp"></jsp:include>
	<jsp:include page="load.jsp"></jsp:include>
</body>
</html>
